﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AiXiu.WebSite.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>登录</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <link href="Css/Login.css" rel="stylesheet" />
</head>
<body>
    <form id="login_form" runat="server">
        <div class="mui-card">
            <!--内容区-->
            <div class="mui-card-content">
                <p class="segmented">
                    <a class="mui-btn mui-btn-primary" href="#">用户名密码登录</a><a class="mui-btn" href="#">手机号密码登录</a>
                </p>
                <span id="errormsg"></span>
                <div class="mui-input-group">
                    <small class="small-title zhorsj">账号</small>
                    <div class="mui-input-row">
                        <asp:TextBox ID="account" class="mui-input-clear mui-input"  placeholder="请输入账号" runat="server"></asp:TextBox>
                    </div>
                    <small class="small-title">密码</small>
                    <div class="mui-input-row">
                        <asp:TextBox ID="password" class="mui-input-password mui-input" placeholder="请输入密码" runat="server" TextMode="Password"></asp:TextBox>
                    </div>
                </div>
            </div>
            <!--页脚，放置补充信息或支持的操作-->
            <div class="mui-card-footer" runat="server">
                <a id="login_btn" data-loading-text="登录中" class="mui-btn mui-btn-primary">立即登录</a>
                <%--<asp:Button ID="login_btn" data-loading-text="登录中" class="mui-btn mui-btn-primary mui-btn-outlined" runat="server" Text="立即登录" ForeColor="White" />--%>
                <p >登录即代表您同意<a>《用户服务协议》</a></p>
                <p >没有账号？<a id='reg' href="Register.aspx" >现在注册</a></p>
            </div>
        </div>
    </form>
    <script src="Content/jquery-3.6.0.min.js"></script>
    <script src="Content/mui/js/mui.min.js"></script>
    <script>
        mui.init();
        $(function () {
            //切换手机密码登录或账号密码登录
            $(".segmented .mui-btn:first-child").click(function () {
                if ($(".zhorsj").text() != "账号") {
                    $(".zhorsj").text("账号");
                    $(this).addClass("mui-btn-primary").css("color", "white").siblings().removeClass("mui-btn-primary").css("color", "#007AFF");
                    $("#account").attr("placeholder", "请输入账号");
                    $("#errormsg").text("");
                }
            });
            $(".segmented .mui-btn:last-child").click(function () {
                if ($(".zhorsj").text() != "手机号") {
                    $(".zhorsj").text("手机号");
                    $(this).addClass("mui-btn-primary").css("color", "white").siblings().removeClass("mui-btn-primary").css("color", "#007AFF");
                    $("#account").attr("placeholder", "请输入手机号码");
                    $("#errormsg").text("");
                }
            });
            //登录验证
            $("#login_btn").click(function () {
                $("#errormsg").text("");
                var zh = $("#account").val();
                var is_username = $(".zhorsj").text() == "账号";
                //账号判断
                if (zh == "" || zh == null) {
                    $("#errormsg").text($(".zhorsj").text() + "不能为空");
                    return;
                }
                var reg = /^1[356789]\d{9}$/;
                if (!is_username && !reg.test(zh)) {
                    $("#errormsg").text("手机号不合法");
                    return;
                }

                //密码判断
                var pwd = $("#password").val();
                if (pwd == "" || pwd == null) {
                    $("#errormsg").text("密码不能为空");
                    return;
                }
                reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
                if (!reg.test(pwd)) {
                    $("#errormsg").text("请输入6-20位字母数字组合密码");
                    return;
                }

                //显示登陆中锁定按钮
                mui(this).button('loading');
                $("#errormsg").text("");
                $.post(
                    "Handler/Login.ashx",
                    { "zh": zh, "pwd": pwd, "is_username": is_username },
                    function (data) {
                        //返回显示按钮
                        mui('#login_btn').button('reset');
                        if (data.StatusCode != 0) {
                            $("#errormsg").text(data.Message);
                            return;
                        }
                        var user = JSON.stringify(data.Result);
                        $.ajax({
                            url: "Login.aspx/loginSuccessful",  //调用后台方法
                            type: "post",
                            data: "{ 'user': '"+ user +"'}",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                location.href = data.d;
                            }, error: function (e) {
                                alert("未知错误：" + e.responseText);
                            }
                        });
                    },"json"
                );
            });
        });
    </script>
</body>
</html>

